<@override name="content">
<div class="pagination pagination-centered">
  <div class="pull-left" id="search-form">
    <form class="form-search" action="problem/search" method="get">
      <div class="input-append">
        <input type="text" class="input-medium search-query" name="word" value="${word!}">
        <select name="scope" class="input-small">
          <option value="">All</option>
          <option value="title"<#if scope=="title">selected</#if>>Title</option>
          <option value="source"<#if scope=="source">selected</#if>>Source</option>
          <option value="tag"<#if scope=="tag">selected</#if>>Tag</option>
          <option value="content"<#if scope=="content">selected</#if>>Content</option>
        </select>
        <button type="submit" class="btn btn-info">Search</button>
      </div>
    </form>
  </div>
  <#include "../common/_paginate.html" />
  <@paginate currentPage=problemList.pageNumber totalPage=problemList.totalPage actionUrl="problem/search/" urlParas="?word=${word!}&scope=${scope!}" />
  <div class="pull-right">
    <span class="badge badge-info">${problemList.pageNumber}/${problemList.totalPage} Pages</span>
    <span class="badge badge-info">${problemList.totalRow}Problems</span>
  </div>
</div>

<table id="problem-list" class="table table-hover table-condensed">
  <thead>
  <tr>
    <th></th>
    <th>ID</th>
    <th>Title</th>
    <th>AC</th>
    <th>Submit</th>
    <th>Source</th>
    <th>Date</th>
  </tr>
  </thead>
  <tbody>
    <#if problemList??>
      <#list problemList.list as Problem>
      <tr>
        <td class="result" pid="${Problem.pid!}"></td>
        <td class="pid">${Problem.pid!}</td>
        <td class="title"><a href="problem/show/${Problem.pid!}">${Problem.title!}</a></td>
        <td class="accept"><a href="status/?pid=${Problem.pid!}&result=0">${Problem.accepted!}</a></td>
        <td class="submit"><a href="status/?pid=${Problem.pid!}">${Problem.submission!}</a></td>
        <td class="source"><a href="problem/search?word=${Problem.source!}&scope=source">${Problem.source!}</a></td>
        <td class="ctime">${Problem.ctime_t!}</td>
      </tr>
      </#list>
    </#if>
  </tbody>
</table>
</@override>

<@override name="scripts">
  <#if oj_style != "slate">
  <link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
  <script src="assets/tablecloth/js/jquery.metadata.js"></script>
  <script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
  <script src="assets/tablecloth/js/jquery.tablecloth.js"></script>
  </#if>

<script type="text/javascript">
  $(document).ready(function () {
    var prevpage = "/problem/search/${problemList.pageNumber-1}?word=${word}&scope=${scope}<#if problemList.pageSize!=pageSize>&s=${problemList.pageSize}</#if>"
    var nextpage = "/problem/search/${problemList.pageNumber+1}?word=${word}&scope=${scope}<#if problemList.pageSize!=pageSize>&s=${problemList.pageSize}</#if>"
    $(document).keydown(function (event) {
        <#if (problemList.pageNumber>1)>if (event.keyCode == 37)window.location = prevpage;</#if>
        <#if problemList.pageNumber<problemList.totalPage>if (event.keyCode == 39)window.location = nextpage;</#if>
    });

    <#if oj_style != "slate">
      $("#problem-list").tablecloth({
        theme: "stats",
        condensed: true,
        sortable: true,
        striped: true,
        clean: true
      });
    </#if>

    <#if user??>
      $.getJSON('/api/problem/userResult', function (data) {
        if (data.userResult) {
          for (var i = 0; i < data.userResult.length; ++i) {
            var problem = data.userResult[i];
            if (problem.result != data.acType)
              $('.result[pid=' + problem.pid + ']').addClass('wa').html('<span class="label label-important">N</span>');
            else
              $('.result[pid=' + problem.pid + ']').addClass('ac').html('<span class="label label-success">Y</span>');
          }
        }
      });
    </#if>
  });
</script>
</@override>
<@extends name="../common/_layout.html" />
